<template>
	<view>
		<view @click="show = true">
			<view class="areaSelect-box">
				<text>
					{{ selectItem.label || '请选择' }}
				</text>
				<view class="ml20">
					<u-icon v-show="show" color="#607589" name="arrow-up-fill" size="20"></u-icon>
					<u-icon v-show="!show" color="#607589" name="arrow-down-fill" size="20"></u-icon>
				</view>
			</view>
		</view>
		<u-select v-model="show" :default-value="selectIndex" :list="list" @confirm="confirm" @cancel="cancel"></u-select>
	</view>
</template>
<script>
	export default {
		name: '',

		props: {
			value: {
				type: null,
				default: null
			},
			// 是否默认选中
			defaultSelect: {
				type: Boolean,
				default: true
			}
		},
		components: {},
		model: {
			event: 'change',
			prop: 'value'
		},
		data() {
			return {
				show: false,
				selectIndex: [0], // 选中下标
				list: [
					// {
					// 	value: '1',
					// 	label: '江'
					// }
				],
				selectItem: {}
			}
		},
		methods: {
			async init(defaultVal) {
				const resp = await uni.getStorageSync('countyInfos')
				this.resp = resp
				this.list = resp.map((item, index) => {
					return {
						label: item.areaName,
						value: item.areaCode,
						extra: index
					}
				})
				// 存在默认值
				if (this.value) {
					this.setData(this.value)
					return
				}
				// 初始化默认值
				if (defaultVal) {
					this.setData(defaultVal)
					return
				}

				// 默认选中第一个
				if (this.defaultSelect) {
					this.confirm([this.list[0]])
				}
			},
			confirm(arr) {
				let item = arr[0]
				this.selectIndex = [item.extra]
				this.selectItem = item
				this.$emit('confirm', item.value.slice(0, 6), this.resp[this.selectIndex])
				this.$emit('change', item.value.slice(0, 6), this.resp[this.selectIndex])
			},
			cancel() {
				this.$emit('cancel')
			},
			setData(areaCode) {
				let item = this.list.find((item) => item.value == areaCode)
				if (item) {
					this.selectIndex = [item.extra]
					this.selectItem = item
					this.confirm([item])
				}
			},
			getUserInfo() {
				const info = uni.getStorageSync('getUserInfoData')
				this.init(info.dept.code)
			}
		},
		computed: {},
		mounted() {
			this.getUserInfo()
		}
	}
</script>
<style lang="less" scoped>
	.areaSelect-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
</style>
